<template>
	<view class="information">
		<view class="information_box">
			<view class="information_box_tab">
				<u-tabs :list="tab" :current='current' :scrollable='false' :activeStyle='{ color: "#FFD489" }'
					:inactiveStyle='{color:"#fff"}' lineColor='#FFD489' lineWidth='35' @change="tabsChange">
				</u-tabs>
			</view>
			<view class="information_box_Content">
				<swiper class="information_box_Content_swiper" :current='current' @change="swiperChange">
					<swiper-item class="information_box_Content_swiper_item" v-for="(item,index) in list" :key="index">
						<u-list style="background-color: rgba(0, 0, 0, 0);">
							<u-list-item class="information_box_Content_swiper_items" v-for="(items,indexs) in item"
								:key="indexs">
								<u-cell style="width: 100%;height: 100%;" :isLink='true' :title="items.article_title"
									@click="gotoFun(`/pages/Information/Information_details/Information_details?id=${items.id}`)"
									:border="false">
								</u-cell>
							</u-list-item>
						</u-list>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<tab-ber :current='1'></tab-ber>
	</view>
</template>

<script>
	import tabBer from '@/components/appTab/appTab.vue';
	import {
		api_index_get_goarticle_list
	} from '@/api/Information.js';
	export default {
		components: {
			tabBer
		},
		data() {
			return {
				current: 0,
				tab: [{
					name: '公告',
					type: 1
				}, {
					name: '资料',
					type: 2
				}, {
					name: '视频',
					type: 3
				}, {
					name: '操作',
					type: 4
				}],
				list: [

				],
				openid: ''
			};
		},
		onLoad() {
			uni.getStorage({
				key: 'openid',
				success: (res) => {
					this.openid = res.data;
				},
				fail: () => {
					uni.reLaunch({
						url: '/pages/login/login'
					});
				}
			});
		},
		async onShow() {
			uni.hideTabBar();
			this.list = []
			for (let i = 0; this.tab.length > i; i++) {
				const res = await this.api_index_zixunFun(this.tab[i].type);
				this.list.push(res);
			}
		},
		methods: {
			gotoFun(url) {
				console.log(url);
				uni.navigateTo({
					url
				})
			},
			tabsChange(e) {
				this.current = e.index;
			},
			swiperChange(e) {
				console.log(e);
				this.current = e.detail.current;
			},
			async api_index_zixunFun(type) {
				let up = {
					openid: this.openid,
					type
				}
				let data = await api_index_get_goarticle_list(up);

				return data.article_list
			}
		}
	}
</script>

<style lang="scss">
	.information {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		padding-top: var(--status-bar-height);
		background-color: #F6F6F6;

		.information_box {
			width: 100%;
			flex: 1;
			display: flex;
			flex-direction: column;

			.information_box_tab {
				width: 100%;
				height: 88rpx;
				background-color: #E13A17;
			}

			.information_box_Content {
				flex: 1;
				width: 100%;
				padding: 25rpx 0;

				.information_box_Content_swiper {
					width: 100%;
					height: 100%;

					.information_box_Content_swiper_item {
						width: 100%;
						height: 100%;
						overflow-y: auto;
						padding: 0 30rpx;
						box-sizing: border-box;


						.information_box_Content_swiper_items {
							width: 100%;
							height: 98rpx;
							background-color: #fff;
							// color: #000;
							margin: 20rpx 0;
							// display: flex;
							// justify-content: space-between;
							// align-items: center;
							// padding: 0 20rpx;
						}
					}

				}
			}
		}

	}
</style>